<template>
    <div class="container">
        <div class="banner">这里是显示一些页面的布局练习</div>
        <ul>
            <template v-for="(item, index) in pagesRouter.children">
                <li :key="index" @click="$router.push(`${item.path}`)" v-if="$route.path !== item.path">{{item.meta.title}}</li>
            </template>
        </ul>
    </div>
</template>

<script>
import pagesRouter from "@/router/modules/pages"
export default {
    name: 'pages-index',
    data(){
        return {
            pagesRouter: pagesRouter[0]
        }
    }
}
</script>

<style lang="less" scoped>
    .banner{
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        color: #666;
    }
    ul{
        padding: 30px;
        li{
            padding: 30px;
            background-color: #ffffff;
            border-radius: 20px;
            display: flex;
            font-size: 30px;
            margin-bottom: 30px;
        }
    }
</style>